import React, {Component} from 'react';
import './index.less';
import {connect} from 'src/hrpub/common/store';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
import {isBlackBg} from 'src/hrpub/common/utils/utils';
// 引入折线图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';

import moment from 'moment';
import {MyYearPicker} from "../../../../../../public/components/MyDatePicker";
import {COMMON} from "../../../../unit/util";


class Echarts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dateValue: null,
        };
    }

    componentWillReceiveProps(nextProps, nextContext) {
        if (nextProps.pk_org !== this.props.pk_org || nextProps.pk_psncl !== this.props.pk_psncl) {
            this.getChartData(nextProps);
        }

    }

    componentDidMount() {
        let curTime = new Date();
        let dateValue = curTime.getFullYear() + "";
        this.setState({
            dateValue
        });
        setTimeout(this.drawChart, 100)
        // this.drawChart();
    }

    drawChart = () => {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('entry-dimission'));
        //  请求数据后 在初始化chart
        this.getChartData(this.props);
    };

    /**
     * 获取图表数据
     * @returns {Promise<void>}
     */
    getChartData = async (props) => {
        let year;
        let dateVal = (this.state.dateValue && this.state.dateValue._d) || (new Date());
        year = dateVal.getFullYear() + '';
        let postData = {
            year,
            pk_org: props.pk_org,
            pk_psncl: props.pk_psncl
        };
        let res = await props.dispatch({
            type: 'staffCom/queryEntryDimi',
            payload: {
                postData
            }
        });
        if (!res.success) return;
        this.formatData(res);
    };

    /**
     * 处理返回数据
     * @param res
     */
    formatData = (res) => {
        let data1 = [];
        let data2 = [];
        res.data.dimission.forEach(function (item) {
            data1.push(item.count);
        });
        res.data.entry.forEach(function (item) {
            data2.push(item.count);
        });
        let option = this.getOption(data1, data2);
        // 绘制图表
        this.myChart.setOption(option);
    };

    /**
     *
     * @param data1 [120, 132, 101, 134, 90, 230, 210, 220, 254, 190, 188, 192]
     * @param data2 [220, 232, 201, 234, 190, 330, 310, 320, 354, 290, 288, 292]
     * @returns
     */
    getOption(data1, data2) {
        let language = this.props.staffCom.language;
        let lineColor = isBlackBg() ? "#39393f" : "#ccc";
        return {
            title: {
                text: null
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [language['gx6008-000076'], language['gx6008-000075']],
                x: 'right',
                padding: [20, 50, 20, 20],
                textStyle: {
                    color: "#999"
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                borderColor: lineColor
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    language['gx6008-000140'],
                    language['gx6008-000141'],
                    language['gx6008-000142'],
                    language['gx6008-000143'],
                    language['gx6008-000144'],
                    language['gx6008-000145'],
                    language['gx6008-000146'],
                    language['gx6008-000147'],
                    language['gx6008-000148'],
                    language['gx6008-000149'],
                    language['gx6008-000150'],
                    language['gx6008-000151']
                ],
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            series: [{
                name: language['gx6008-000076'],
                type: 'line',
                symbolSize: 10,
                //data: [120, 132, 101, 134, 90, 230, 210, 220, 254, 190, 188, 192], // @1: data
                data: data1,
                itemStyle: {
                    normal: {
                        color: '#f68f85'
                    }
                },
                lineStyle: {
                    normal: {
                        color: '#f68f85',
                        width: 3
                    }
                }
            },
                {
                    name: language['gx6008-000075'],
                    type: 'line',
                    symbolSize: 10,
                    //data: [220, 232, 201, 234, 190, 330, 310, 320, 354, 290, 288, 292], // @2: data
                    data: data2,
                    itemStyle: {
                        normal: {
                            color: '#44bde4'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#44bde4',
                            width: 3
                        }
                    }
                }
            ]
        };
    }

    onChange = (date) => {
        this.setState({
            dateValue: date
        }, () => {
            this.getChartData(this.props);
        })
    };

    clickMore = () => {
        this.props.showDetail(COMMON.pageEntryDimission);
        let mainDate = this.state.dateValue;
        if (mainDate.hasOwnProperty("_d")) {
            let curDate = mainDate._d;
            mainDate = curDate.getFullYear() + '';
        }
        this.props.dispatch({
            type: 'staffCom/update',
            payload: {
                mainDate
            }
        })
    };

    render() {
        const {staffCom} = this.props;
        return (
            <div className={'entry-dimission-echarts'}>
                <div className={`chart-title  ${this.props.titleClass}`}>
                    <div className={`title-name`}>
                        {staffCom.language["gx6008-000181"]}
                    </div>
                    <div className={'more'} onClick={() => {
                        this.clickMore();
                    }}>
                    </div>
                </div>
                <div className={"chart-content"}>
                    <div className={'date'}>
                        <MyYearPicker
                            format={"YYYY"}
                            defaultValue={moment()}
                            onChange={this.onChange}
                            // showToday={true}
                        />
                    </div>
                    <div id="entry-dimission">

                    </div>
                </div>
            </div>
        );
    }
}

export default Echarts;
